<template>
	<view class="">
		<u-navbar :border-bottom="false" :title="navTitle" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: '#fff'}"></u-navbar>
		<view class="shop-header">
			<image src="/static/logo.png" mode="" class="shop-logo"></image>
			<view class="shop-name u-text-center">
				{{ownerName}}
			</view>
			<view class="u-m-b-60 u-m-t-20 u-text-center">
				已签约 {{itemsCount}} 个单品
			</view>
			
		</view>
		
		<view class="">
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				客户可用支付方式（多选）
			</view>
			<view class="u-p-t-30 u-p-b-30 u-text-center" v-if="methodList.length===0">
				您没有设置任何一种收款方式，请前往店铺设置中配置！
			</view>
			<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" v-else>
				<u-checkbox-group @change="checkboxGroupChange" v-model="allowCollections" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in methodList" :key="index" >
						<view class="" style="flex:1">
							{{item.name}}
						</view>
						<u-checkbox
						v-model="item.isCheck"
							:name="item.id"
							@change="checkboxChange"
							class="choose-radio"
						>
						</u-checkbox>
					</view>
				
				</u-checkbox-group>
			</view>
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				客户可用结算方式（单选）
			</view>
			<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
				<u-radio-group v-model="authorizationSettlementMethod" :wrap="true" style="width: 100%;" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in SettlementMethodList" :key="index" >
						<view class="" style="flex:1">
							{{item.name}}
						</view>
						<u-radio
							:name="item.id"
							class="choose-radio"
						>
						</u-radio>
					</view>
				
				</u-radio-group>
			</view>
			<view v-if="authorizationSettlementMethod==1" class="u-p-20 u-m-t-20" style="background-color: #fff;">
				<view class="u-font-32 u-flex u-col-center  u-p-t-40 u-p-b-40  u-p-l-35 u-p-r-35">
					<view class="">
						赊账额度
					</view>
					<u-input v-model="authorizationLimit" class="u-m-l-30" placeholder="请输入最大赊账" :type="'number'" />
					<view class="">
						元
					</view>
				</view>
				
				<view class="u-p-l-35 u-p-r-35 u-p-b-20">
					<view class="u-p-t-40 u-p-b-40 u-p-l-20 u-p-r-20" style="box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(8,1,3,0.05);border-radius: 20rpx;">
						<view class="u-flex u-row-between">
							<view class="">
								信用额度   {{used}}  /  {{authorizationLimit}}
							</view>
							<view v-if="used<authorizationLimit">
								剩余额度 {{authorizationLimit-used}}
							</view>
							<view v-else style="color:#ff551a">
								额度不足
							</view>
						</view>
						<u-line-progress class="used-progress u-m-t-20 " :show-percent="false"  :percent="used<authorizationLimit?(used/authorizationLimit)*100:100"  height="38"></u-line-progress>
					</view>
				</view>
				
			</view>
			<view class="" v-if="routeType!=='sale'">
				<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
					运费
				</view>
				<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
					<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
						<view class="">
							起购到付额
						</view>
						<u-input v-model="baseValue" class="u-m-l-30" placeholder="满额可下单，运费到付" :type="'number'" />
						<view class="">
							元
						</view>
					</view>
					<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
						<view class="">
							包邮自提额
						</view>
						<u-input v-model="freeShippingValue" class="u-m-l-30" placeholder="满额可包邮到物流站自行提货" :type="'number'" />
						<view class="">
							元
						</view>
					</view>
					<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
						<view class="">
							包邮包送额
						</view>
						<u-input v-model="freeDeliveryValue" class="u-m-l-30" placeholder="满额可包邮到物流站并包送上门" :type="'number'" />
						<view class="">
							元
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-p-20 u-m-t-20 u-p-t-40 u-p-b-40 u-font-32 u-p-l-35 u-p-r-35 " style="background-color: #fff;" >
				<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
					<view class="">
						业务员
					</view>
					<view class="u-flex u-col-center u-row-between"  style="flex:1;" @click="employShow = true">
						<view class="u-m-l-30"  :style="{'flex':1,'color':chooseEmployeeName.length === 0?'rgb(192, 196, 204)':'#333'}">
							<text v-if="chooseEmployeeName.length === 0" style="color:rgb(192, 196, 204);">请选择业务员</text>
							<view v-else class="u-text-right">
								<text v-for="(item,index) in chooseEmployeeName" :key="item.id">{{item.name+((index !== chooseEmployeeName.length-1)?',':'') }}</text>
							</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
					<view class="" style="width: ;">
						标&nbsp;&nbsp;&nbsp;签
					</view>
					<view class="u-flex u-row-between u-flex-1"  @click="chooseTagOpen()">
						<view class="u-line-1 u-text-right" style="flex:1;" v-if="contractTags.length!=0">
							<text style="color: #333;" :key="item.tagId" v-for="(item,index) in contractTags">{{item.name}}{{index!==contractTags.length-1?',':''}}</text>
						</view>
						<view v-else class="u-m-l-30">
							<text style="color:rgb(192, 196, 204)">请选择客户标签</text>
						</view>
						<u-icon name="arrow-right" ></u-icon>
					</view>
				</view>
				<view class="u-flex u-col-center  u-p-t-30 u-p-b-30 u-row-between ">
					<view class="">
						售后
					</view>
					<u-switch v-model="allowRecommend"  active-color="#FFBB1A" inactive-color="#ccc"></u-switch>
				</view>
			</view>
		</view>
		
		<view class="apply-btn-container u-p-b-60">
			<u-button class="apply-btn" @click="applySubmit">确定</u-button>
		</view>
		<u-popup v-model="employShow" mode="bottom">
			<view style="min-height: 800rpx;">
				<view class="u-text-center  u-font-32" style="line-height: 100rpx;height: 100rpx;font-weight: bold;">
					选择合约业务员
				</view>
				<EmployeeList :chooseEmployee="chooseEmployeeId" @getEmployee="getEmployeeFn"></EmployeeList>
				<!-- <view class="" style="width: 80%;background-color: #ffbb1a;margin:20rpx auto;height: 80rpx;text-align: center; line-height: 80rpx; border-radius: 50rpx;">
					确定
				</view> -->
			</view>
		</u-popup>
		<u-popup v-model="chooseTagShow" safe-area-inset-bottom	:closeable="true"  mode="bottom" length="60%">
			<view style="height: 100%;flex-direction: column;" class="u-flex">
				<view class="u-text-center u-p-t-30 u-p-b-30">选择标签</view>
				<view style="flex:1;width: 100%;">
					<choose-tag v-if="chooseTagShow" @getTag="chooseTagEmit" :chooseTagIds="chooseTagList"></choose-tag>
				</view>
				
			</view>
		</u-popup>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import EmployeeList from './compontents/EmployeeList.vue'
	import ChooseTag from './compontents/ChooseTag.vue'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data(){
			return{
				chooseTagShow:false,
				chooseTagList:[],
				contractTags:[],
				allowCollections:[],
				levelShow:false,
				methodList:[],
				employShow:false,
				SettlementMethodList:[
					{
						name:"先款后货",
						id:0,						
					},
					{
						name:"先货后款",
						id:1,
					},
					
				],
				authorizationSettlementMethod:0,
				allowRecommend:false,
				authorizationLimit:'',
				ownerName:'',
				ownerId:'',
				shopId:'',
				navTitle:'合约内容',
				routeType:'',
				loading:false,
				itemsCount:0,
				baseValue:'',
				freeShippingValue:'',
				freeDeliveryValue:'',
				chooseEmployeeId:[],
				chooseEmployeeName:[],
				used:0,
				balance:0
			}
		},
		components:{
			EmployeeList,ChooseTag
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onLoad(options){
			this.ownerName = options.ownerName;
			this.ownerId = options.ownerId;
			// this.shopId = options.shopId;
			this.salesAgreementId = options.salesAgreementId;
			this.shopId = this.storeShop.id;
			this.getSellerMethodList();
			this.getSellerAuthList();
		},
		methods:{
			chooseTagOpen(){
					this.chooseTagList = this.contractTags.map(item=>{return item.tagId});
				this.chooseTagShow = true;
			},
			chooseTagEmit(val){
				this.contractTags = val.dataList;
				this.chooseTagList = val.idList;
				this.chooseTagShow = false;
			},
			async getEmployeeFn(val){
				// this.loading = true;
				// let params = {
				// 	saId:this.salesAgreementId,
				// 	uid:val.userId
				// }
				// const res = await this.$setHttp.get('api/Shop/v2/SetSalesAgreementDirector', {header:{shopId:this.shopId}, params: params });
				// this.loading = false;
				// if(res.code === 200){
				// 	this.chooseEmployeeId =val.userId;
				// 	this.chooseEmployeeName = val.realname;
				// 	this.employShow = false;
				// }else{
				// 	this.$u.toast('设置业务员失败，错误信息：'+res.erroMessage)
				// }
				console.log(val);
				this.chooseEmployeeId = val.hideData;
				this.chooseEmployeeName = val.showData;
					this.employShow = false;
			},
			checkboxGroupChange(val){
				console.log(val);
				this.allowCollections= val;
			},
			checkboxChange(val){
					// console.log(val);
					// console.log(this.methodList);
			},
			async getSellerMethodList(){
				this.loading = true;
				let params = {
					shopId:this.shopId
				}
				const res = await this.$setHttp.get('api/Shop/GetShopCollections', {header:{shopId:this.shopId}, params: params });
				this.loading = false;
				console.log(res); 
				if(res.code == 200){
						this.methodList = res.data.shopCollections.map(item=>{
							item.isCheck = false;
							return item;
						});
				}else{
					this.$u.toast('获取店铺支付方式列表失败')
				}
				
			},
			async getSellerAuthList(){
				this.loading = true;
				let params = {
					salesAgreementId:this.salesAgreementId
				}
				const res = await this.$setHttp.get('api/v1.2/Shop/GetSalesAgreementDetail', {header:{shopId:this.shopId}, params: params });
				this.loading = false;
				if(res.code == 200){
					let ary = [];
					res.data.salesAgreementCollections.forEach((item,index)=>{
						this.methodList.forEach(child=>{
							if(child.id === item.id){
								ary.push(item.id);
								child.isCheck = true;
							}
						})
						
					});
					this.allowCollections = ary;
					this.allowRecommend = res.data.openAfterSales;
					this.authorizationSettlementMethod = res.data.settlementMethod||0;
					this.authorizationLimit = res.data.maximumDebtAmount||0;
					this.itemsCount = res.data.itemsCount;
					this.baseValue = res.data.baseValue;
					this.freeShippingValue = res.data.freeShippingValue;
					this.freeDeliveryValue = res.data.freeDeliveryValue;
					this.chooseEmployeeName = res.data.responsiblePeople;
					this.contractTags = res.data.tags;
					if(res.data.responsiblePeople.length!==0){
						this.chooseEmployeeId = res.data.responsiblePeople.map(item=>{
							return item.userId
						});
					}
					this.used = res.data.used;
					this.balance = res.data.balance;
				}
				
			},
			
			async applySubmit(){
				this.loading = true;
				if(this.allowCollections.length === 0){
					this.loading = false;
					this.$u.toast('收款方式不得为空');
					return false;
				}
				if(this.chooseEmployeeId.length===0){
					this.loading = false;
					this.$u.toast('业务员不得为空');
					return false;
				}
				   if(this.authorizationSettlementMethod === 1&&(this.authorizationLimit === ''||this.authorizationLimit===null)){
					   this.loading = false;
				         this.$u.toast('先货后款结算方式，赊账额度不得为空！');
				        return false;
				      }
				let params = {
				  "settlementMethod": this.authorizationSettlementMethod,
				  "maximumDebtAmount": this.authorizationLimit,
				  "shopCollectionIds":this.allowCollections,
				  "salesAgreementId": this.salesAgreementId,
				  "baseValue": this.baseValue,
				  "freeShippingValue": this.freeShippingValue,
				  "freeDeliveryValue": this.freeDeliveryValue,
				  "openAfterSales": this.allowRecommend,
				  responsiblePeopleIds:this.chooseEmployeeId,
				  tags:this.contractTags
				}
				const res = await this.$setHttp.put('api/v1.2/Shop/UpdateSalesAgreementInfo',params,{header:{shopId:this.shopId}});
				this.loading = false;
				if(res.code === 200){
					this.$u.toast('保存成功');
					this.$mHelper.delayedJump();
				}else{
					this.$u.toast('保存失败，错误信息：'+res.erroMessage)
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.used-progress{
		::v-deep .u-active{
			background:linear-gradient(90deg, #FFBB1A, #FF551A);
		}
	}
	.shop-header{
		background: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		.shop-logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 48rpx auto 30rpx;
			display:block;
		}
		.shop-name{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		
	}
	.check-item{
		border-bottom:1px solid #E5E5E5;
		&:nth-last-of-type(1){
			border: none;
		}
		.choose-radio{
			flex: 0 0 50rpx !important;
			width: 50rpx !important;
		}
	}
		
	.apply-btn-container{
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;		
		margin-top: 30rpx;
		z-index: 999;
		display: block;
		.apply-btn{
			width: 80%;
			height: 90rpx;
			background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
			border-radius: 45rpx;
			&::after{
				border: none;
			}
		}
	}
	
</style>
